<template>
  <div>
    <div class="pep-info">
      <header class="risk-btn"><span>风险信息</span></header>
      <div class="apply-type">
        <el-form :model="riskForm" size="small" label-width="120px" style="max-width: 100%">
          <el-row>
            <el-col :span="6">
              <el-form-item label="申请书条形码">
                    <el-input v-model="riskForm.value1" placeholder="" >
                    </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="套卡类型">
                    <el-select v-model="riskForm.value2" placeholder="please select your zone">
                      <el-option v-for="(item,index) in cardLists" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请书条形码">
                    <el-input v-model="riskForm.value3" placeholder="">
                    </el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请书条形码">
                    <el-input v-model="riskForm.value4" placeholder="" >
                    </el-input>
                    </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="重申标志">
                    <el-select v-model="riskForm.value5" placeholder="" clearable>
                      <el-option v-for="(item,index) in list" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="套卡类型">
                    <el-select v-model="riskForm.value6" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请书条形码">
                    <el-input v-model="riskForm.value7" placeholder="">
                    </el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请书条形码">
                    <el-input v-model="riskForm.value8" placeholder="" >
                    </el-input>
                    </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </div>
     
    </div>
     <!--个人信息模块-->
      <div class="person-info">
         <header class="risk-btn"><span>个人信息</span></header>
          <el-form :model="personalFrom" size="small" label-width="120px" style="max-width: 100%;line-height:1.5;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名">
                    <el-input v-model="personalFrom.value1" placeholder="" >
                    </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="拼音">
                    <el-select v-model="personalFrom.value2" placeholder="please select your zone">
                      <el-option v-for="(item,index) in cardLists" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                    <el-input v-model="personalFrom.value3" placeholder="">
                    </el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证件号码">
                    <el-input v-model="personalFrom.value4" placeholder="" >
                    </el-input>
                    </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="出生日期">
                    <el-select v-model="personalFrom.value5" placeholder="" clearable>
                      <el-option v-for="(item,index) in list" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="line-style" label="国籍/(国家/地区)细分代码">
                    <el-select v-model="personalFrom.value6" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总工龄">
                    <el-input v-model="personalFrom.value7" placeholder="">
                    </el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="line-style" label="是否有其他曾用名或别名?">
                     <el-checkbox v-model="personalFrom.hasOtherNames" true-label="是" false-label="否"></el-checkbox>
                    </el-form-item>
            </el-col>
          </el-row>
           <el-row>
            <el-col :span="6">
              <el-form-item label="曾用名1姓">
                    <el-select v-model="personalFrom.value9" placeholder="" clearable>
                      <el-option v-for="(item,index) in list" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="曾用名1名">
                    <el-select v-model="personalFrom.value10" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="曾用名1姓(拼音)">
                    <el-input v-model="personalFrom.value11" placeholder="">
                    </el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="曾用名1名(拼音)">
                    <el-input v-model="personalFrom.value12" placeholder="" >
                    </el-input>
                    </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="曾用名2姓">
                    <el-select v-model="personalFrom.value13" placeholder="" clearable>
                      <el-option v-for="(item,index) in list" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="曾用名2名">
                    <el-select v-model="personalFrom.value14" placeholder="please select your zone">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="曾用名2姓(拼音)">
                    <el-input v-model="personalFrom.value15" placeholder="">
                    </el-input>
                    </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="曾用名2名(拼音)">
                    <el-input v-model="personalFrom.value16" placeholder="" >
                    </el-input>
                    </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="UID">
                    <el-select v-model="personalFrom.value17" placeholder="" clearable>
                      <el-option v-for="(item,index) in list" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
        </el-form>

      </div>
      <!--审批详情-->
      <div class="recommend-info">
         <header class="risk-btn"><span>审批详情</span></header>
          <el-form :model="detialForm" ref="detialForm" size="small" label-width="120px" style="max-width: 100%;" :rules="rules">
            <el-row>
              <el-col :span="6">
                <el-form-item label="RTS result">
                      <el-input v-model="detialForm.value1" placeholder="">
                    </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="建议结论" prop="recommendation"  :class="mood">
                      <el-select v-model="detialForm.recommendation" placeholder="请选择建议结论" clearable>
                      <el-option
                        v-for="item in recommendationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
            </el-row>
              <el-row>
              <el-col :span="6">
                <el-form-item label="预审意见">
                      <el-input  v-model="detialForm.value3"
                       style="width: 800px;"
                       type="textarea"
                       :rows="4"
                       placeholder="Please input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
         </el-form>
      </div>
    <div class="button-group">
       <el-button type="primary" @click="commit">提交</el-button>
       <el-button type="primary" @click="cancel">取消</el-button>
       <el-button type="primary" @click="refuse">拒绝</el-button>
    </div>


  </div>
</template>

<script>

export default {
  data(){
    return{
      riskForm:{
        value1:'1',
        value2:'PLEVL-4',
        value3:'3',
        value4:'4',
        value5: true,
        value6: true,
        value7: true,
        value8: true,

      },
      personalFrom:{
        value1:'1',
        value2:'PLEVL-4',
        value3:'3',
        value4:'4',
        value5: true,
        value6: true,
        value7: true,
        hasOtherNames: true,
        value9: true,
        value10: true,
        value11: true,
        value12: true,
        value13: true,
        value14: true,
        value15: true,
        value16: true,
        value17: true,
      },
      recommendation:'',
      detialForm:{
        value1:'1',
        recommendation:'option1',
        value3:'3',
      },
      list:[{value: true,label:'是'},{value:false,label:'否'}],
      cardLists:[{value:'PLEVL-1',label:'普卡'},{value:'PLEVL-2',label:'银卡'},{value:'PLEVL-3',label:'金卡'},{value:'PLEVL-4',label:'白金卡'}],
      recommendationOptions: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      rules: {
          recommendation: [
           { required: true, message: '请选择建议结论', trigger: 'change' },
           { required: true, message: '请选择建议结论', trigger: 'blur' }
          ]
      },
      mood:''
    }
  },
  mounted(){
    console.log("this.detialForm.recommendation",this.detialForm.recommendation);
    if(!this.detialForm.recommendation){
      console.log("是否空字符串或者null")
      //给表单追加一个样式
      this.mood='checkMood';
    }
  },
  methods:{
     commit() {
      this.$refs.detialForm.validate((valid) => {
        if (valid) {
          // 验证通过，可以提交表单
          this.$message({
            message: '提交成功！',
            type: 'success'
          });
          // 这里可以添加实际的提交逻辑,调用表单提交接口

        } else {
          // 验证失败
          this.$message({
            message: '请完善表单信息！',
            type: 'error'
          });
          return false;
        }
      });
    },
     cancel() {
      this.$confirm('是否确认提交', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后执行接口调用逻辑
        // 这里是模拟接口调用，可以替换为实际的API调用
        setTimeout(() => {
          this.$message({
            message: '操作执行成功！',
            type: 'success'
          });
        }, 500);
      }).catch(() => {
        // 用户取消操作
        this.$message({
          message: '已取消操作',
          type: 'info'
        });
      });
    }
  }
}
</script>

<style>
.risk-btn{
  height:40px;
  background-color: #ddd;
  color:#111;
  font-size: 14px;
  font-weight:bold;
  align-items: center;
  line-height: 40px;
}
.risk-btn span{
  margin-left:10px;
}
.apply-type{
  padding: 10px;
}
.pep-info{
  width:100%;
  height:170px;
  border:2px solid #ddd;
}
.person-info{
    height:410px;
    border:2px solid #ddd;
}
.recommend-info{
  height:320px;
   border:2px solid #ddd;
}
.el-form-item .el-input__inner{
  width:280px;
}
.person-info .el-row{
  margin-top: 20px;
}
.recommend-info .el-row{
    margin-top: 20px;
}
.line-style .el-form-item__label{
  line-height:1.5;
}
.checkMood .el-input__inner{
  border:1px solid red;
}
.button-group{
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>